<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心灵笔触</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>

    <style>
        login-dialog {
            width: 400px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }

        .login-dialog h1 {
            font-size: 30px;
            padding: 50px 0;
            text-align: center;
        }

        .login-dialog .row {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-dialog .row span {
            font-size: 19px;
            display: block;
            width: 100px;
            font-weight: 700;
        }

        .login-dialog .row input {
            width: 430px;
            height: 45px;
            line-height: 40px;
            font-size: 24px;
            border-radius: 10px;
            border: none;
            outline: none;
            text-indent: 10px;
        }

        .login-dialog button {
            width: 300px;
            height: 50px;
            color: white;
            background-color: black;
            border: none;
            border-radius: 10px;
        }

        .login-dialog button:active {
            background-color: #666;
        }

        ::placeholder {
            font-size: 15px;
            /* 在这里设置所需的字体大小 */
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo3.jpg" alt="">
        <span class="title">搜索文章</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list2.html">返回</a>
        <a href="javascript:logout()">退出</a>
        <!-- <a href="#">注销</a> -->
    </div>

    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img id="photo" src="img/book5.jpg" class="avtar" alt="">
                <h3></h3>
                <div class="counter">
                    <a href="recommend.html">每日推荐</a>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="login-dialog" id="bookDiv">
                <h1>搜索</h1>
                <div class="row">
                    <span>文章名</span>
                    <input type="text" id="title" placeholder="可选 （选择一种搜索方式）">
                </div>
                <br>
                <div class="row">
                    <span>类型</span>
                    <input type="text" id="type" placeholder="可选 （选择一种搜索方式）">
                </div>
                <br>
                <div class="row">
                    <span>创作时间</span>
                    <input type="text" id="time" placeholder="可选 （选择一种搜索方式）">
                </div>
                <br>
                <div class="row">
                    <span>作者</span>
                    <input type="text" id="user" placeholder="可选 （选择一种搜索方式）">
                </div>
                <br>
                <div class="row">
                    <button id="submit" onclick="search()">搜索</button>
                </div>
            </div>

        </div>

    </div>
    </div>


    </div>
    <script>
        // 初始化方法
        function search() {
            var title = jQuery("#title");
            var type = jQuery("#type");
            var time = jQuery("#time");
            var user = jQuery("#user");
            if (title.val() == "" && type.val() == "" && time.val() == "" && user.val() == "") {
                alert("请选择一种搜索方式！");
                return false;
            }
            if (title.val() != "" && type.val() != "") {
                alert("请明确要选择的搜索方式！");
                return false;
            }
            if (time.val() != "" && type.val() != "") {
                alert("请明确要选择的搜索方式！");
                return false;
            }
            if (title.val() != "" && time.val() != "") {
                alert("请明确要选择的搜索方式！");
                return false;
            }
            if (title.val() != "" && user.val() != "") {
                alert("请明确要选择的搜索方式！");
                return false;
            }
            jQuery.ajax({
                url:"/art/search",
                type:"GET",
                data: {
                    "title": title.val().trim(),
                    "type": type.val().trim(),
                    "time":time.val().trim(),
                    "user":user.val().trim()
                },
                success:function(res) {
                    if(res.code==200) {
                        // 请求成功
                        var createHtml = "";
                        var artList = res.data;
                        if(artList == null || artList.length == 0) {
                            // 未发表文章
                            createHtml += "<h3 style='margin-left:20px;margin-top:20px;'>暂未发布文章哦，去"+
                                "<a href='blog_add.html' style='text-decoration: none;'>创作</a>！</h3>";
                        }else {
                            for(var i = 0; i < artList.length; i++) {
                                    var art = artList[i];
                                    createHtml += '<div class="blog">';
                                    createHtml += '<div class="title">'+art.title+'</div>';
                                    createHtml += '<div class="date">发布时间：'+art.createtime+'</div>';
                                    createHtml += '<div class="desc">';
                                    createHtml += art.content;
                                    createHtml += '</div>';
                                    createHtml += '<a href="blog_content.html?aid='+
                                                  art.id+'" class="detail">查看全文 &gt;&gt;</a>&nbsp;&nbsp;';
                                    createHtml += '</div>';
                            }
                        }
                        alert("搜索成功！");
                        jQuery("#bookDiv").html(createHtml);
                    }else if(res.code == 2){  
                        alert("请先登录！");
                        location.href = "login.html";
                    }else {
                        alert("抱歉，操作失败" + res.msg);
                        location.href = "login.html";
                    }
                }
            })
        }

        // 根据文章 id 进行删除操作
        function del(aid) {
            // 1. 参数效验
            if(aid == "" || aid <= 0) {
                alert("参数错误！");
                return false;
            }
            // 2. 将数据返回给后端进行删除操作
            jQuery.ajax({
                url:"/art/del",
                type:"POST",
                data:{
                    "aid": aid
                },
                success:function(res) {
                    // 3. 将结果展示
                    if(res.code == 200 && res.data == 1) {
                        alert("删除成功！");
                        // 刷新当前页面
                        location.href = location.href;
                    }else if(res.code == -2){
                        // 删除失败
                        alert("请先登录！");
                    }else {
                        // 删除失败
                        alert("抱歉，操作失败！" + res.msg);
                    }
                }
            })

            
        }


    </script>
</body>

</html>